<template>
	<div class="LimitedSeckill" :style="{ backgroundColor: modelData.bgColor }" v-if="goodsList.activityGoods && goodsList.activityGoods.length">
		<div class="top-div clearfix">
			<div class="float_left icon-xsms">
				<text class="ibonfont ibonshijian"></text>
				<text class="xs-text">限时</text>
				<text>秒杀</text>
			</div>
			<view class="count-down float_left">
				<block v-if="phaseTime.day > 0">
					<text class="day-num">{{ phaseTime.day }}</text>
					<text class="day-text">天</text>
				</block>
				<u-count-down
					height="40"
					color="#ffffff"
					separator-size="36"
					font-size="26"
					border-color="#000000"
					bg-color="#000000"
					separator-color="#000000"
					:timestamp="phaseTime.second"
					:show-days="false"
				></u-count-down>
			</view>
			<div class="float_right more-btn" @click="goPage('/pagesT/seckill/Seckill')">
				查看全部
				<text class="ibonfont ibonjinru"></text>
			</div>
		</div>
		<div class="goods-view-out">
			<scroll-view class="goods-view" :scroll-x="modelData.type === 2" :style="{ whiteSpace: modelData.type === 2 ? 'nowrap' : 'normal' }">
				<div
					class="goods-li"
					:style="{ width: 100 / modelData.colNum + '%', marginBottom: modelData.type === 2 ? '0' : '24rpx' }"
					v-for="(item, index) in goodsList.activityGoods"
					:key="index"
				>
					<div class="goods-in" @click="goPage(`/pagesT/product/product?id=${item.goodsId}&skuId=${item.skuId}`)">
						<div class="goods-img-box">
							<image class="goods-img" :class="'goods-img-' + modelData.colNum" :src="item.images[0]" mode="aspectFill"></image>
						</div>
						<div class="goods-info-box">
							<div class="goods-name ellipsis">{{ item.goodsName }}</div>
							<div class="goods-sku ellipsis">
								{{ item.unitName }};
								<text v-for="(sku, skuI) in item.specGroup" :key="skuI">{{ sku.specValueName }};</text>
							</div>
							<div class="goods-price clearfix">
								<div class="float_left" v-if="!showGoodsPrice">¥{{ item.originPrice }}</div>
								<div class="float_right">
									<span class="rem-ic">¥</span>
									<span class="price-text">{{ item.salePrice }}</span>
									<div class="time-tag"></div>
									<span class="time-text">抢</span>
								</div>
								<!-- <div class="float_right add-Car-div" @click.stop="addCart(item.goodsId, item.skuId)">
									<text v-if="modelData.btnStyle === 2" class="ibonfont ibongouwuche1 primary-color"></text>
									<text v-else class="ibonfont ibonxinzeng1 primary-color"></text>
								</div> -->
							</div>
						</div>
					</div>
				</div>
			</scroll-view>
		</div>
		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
		<AddCardModel :selAddress="selAddressD" :skuId="goods_sku_id" @close="is_add_show = false" @change="cardModelPopChange" :isShow="is_add_show" :goodsId="goods_id" />
	</div>
</template>

<script>
import AddCardModel from '@/components/AddCardModel';
export default {
	name: 'LimitedSeckill',
	components: {
		AddCardModel
	},
	props: {
		showGoodsPrice: {
			type: [Number, String],
			default: ''
		},
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		},

		goodsList: {
			type: [Array, Object],
			default: () => {
				return {};
			}
		},
		cartx: {
			type: [Number, String],
			default: '0.08'
		},
		selAddress: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch: {
		selAddress(val) {
			this.selAddressD = val;
		}
	},
	data() {
		return {
			goods_id: 0,
			goods_sku_id: 0,
			is_add_show: false,
			phaseTime: {
				day:0,
				second:''
			},
			selAddressD: {}
		};
	},
	created() {
		let nowData = parseInt(new Date().getTime() / 1000);
		let totalSecond = this.goodsList.endTime - nowData;
		if (totalSecond > 0) {
			this.phaseTime = {
				second: totalSecond % 86400,
				day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400)
			};
		}
	},
	
	methods: {
		cardModelPopChange(obj) {
			if (!obj.show) {
				this.is_add_show = false;
			}
		},
		// 加入购物车
		addCart(id, skuId) {
			this.goods_id = id;
			this.goods_sku_id = skuId;
			this.is_add_show = true;
		}
	}
};
</script>

<style lang="scss">
.LimitedSeckill {
	margin: 20upx 0;
	.top-div {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 30rpx;
		.icon-xsms {
			font-weight: 700;
			font-size: 32upx;
			.ibonshijian {
				font-size: 28rpx;
				margin-right: 6rpx;
				color: #fa6400;
			}
			.xs-text {
				color: #fa6400;
			}
		}
		.count-down {
			font-family: DIN-Medium;
			margin-left: 10rpx;
			.day-num {
				height: 40rpx;
				padding: 0 4rpx;
				display: inline-block;
				background-color: #000000;
				color: #ffffff;
				border-radius: 6rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 28rpx;
			}
			.day-text {
				display: inline-block;
				line-height: 40rpx;
				color: #000000;
				font-size: 24rpx;
				margin: 0 8rpx;
			}
		}
	}
}

.more-btn {
	font-size: 28upx;
	line-height: 80upx;
	color: #9d9d9d;
	padding-right: 20upx;
}

.more-btn .ibonjinru {
	font-size: 23upx;
	vertical-align: middle;
}

/*  商品*/
.goods-view-out {
	padding:0 10rpx 20upx;
	width: 706upx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 12upx;
	.goods-view {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		flex-wrap: wrap;

		.goods-li {
			display: inline-block;
			margin-bottom: 24upx;
			// box-shadow: 2rpx 4rpx 6rpx 0rpx #f5f5f5;
			.goods-in {
				padding: 0 10rpx;
				background-color: #fff;
				// margin-right: 30upx;
			}
		}
	}
}

.goods-img {
	width: 100%;
	display: block;
	margin: 0 auto;
	background-color: #F5F5F5;
	border-radius: 8upx;
}
.goods-img-3 {
	width: 214upx;
	height: 214upx;
	background-color: #F5F5F5;
}
.goods-img-2 {
	height: 260upx;
	width: 260upx;
	background-color: #F5F5F5;
}
.goods-info-box {
	padding-top: 10upx;
}

.goods-name {
	font-size: 28upx;
	color: #000000;
	display: block;
	width: 100%;
	height: 72rpx;
	line-height: 36rpx;
	white-space:normal;
}
.goods-sku {
	font-size: 24rpx;
	margin: 6rpx 0;
	color: #9d9d9d;
}

.goods-price {
	margin: 0 10rpx;
	.float_left {
		font-size: 24rpx;
		font-family: DIN-Medium;
		font-weight: 400;
		color: #9d9d9d;
		line-height: 32rpx;
		text-decoration: line-through;
	}
	.float_right {
		width: 132rpx;
		padding-left: 10rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #fe923e 0%, #ff3724 100%);
		border-radius: 20rpx 8rpx 8rpx 20rpx;
		font-size: 20rpx;
		font-family: DIN-Medium;
		font-weight: 600;
		color: #ffffff;
		line-height: 38rpx;
		position: relative;
		overflow: hidden;
		.rem-ic {
			font-weight: 400;
		}
		.time-tag {
			position: absolute;
			right: -16rpx;
			transform: rotate(-60deg);
			top: 0;
			text-align: center;
			color: #ffffff;
			width: 48rpx;
			height: 48rpx;
			background: linear-gradient(90deg, #fe923e 0%, #ff3724 100%);
			border-radius: 8rpx;
			border: 1px solid rgba(255, 255, 255, 0.8);
		}
		.time-text {
			position: absolute;
			right: 4rpx;
			top: 2rpx;
			font-size: 20rpx;
		}
	}
}
.rmb-icon {
	font-size: 20upx;
	// font-weight: 300;
}

.y-price {
	color: #999;
	padding-top: 6upx;
	font-size: 22upx;
	text-decoration: line-through;
}

.show-scroll {
	height: 368upx;
	overflow: hidden;
}
</style>
